<template>
    <div class="home-box">
        <!-- 首页分类列表 start -->
        <div v-for="(item, index) in types" :key="index">
            <div class="list-name">
                <span>{{item.typeName}}</span>
                <!-- <span class="list-more" @click=" $root.$emit('changePage','film-box') ">更多 ></span> -->
                <!-- <router-link class="list-more" :to="'/films?typeId='+item.typeId" tag="span">更多 ></router-link> -->
                <!-- get传递参数的其他写法 -->
                <!-- 1 -->
                <!-- <router-link
                    class="list-more"
                    :to="{
                    path:'/films',
                    query:{
                        typeId:item.typeId
                    }
                }"
                    tag="span"
                >更多 ></router-link> -->
                <!-- 2 name别名 -->
                <router-link
                    class="list-more"
                    :to="{
                    name:'films',
                    query:{
                        typeId:item.typeId
                    }
                }"
                    tag="span"
                >更多 ></router-link>
            </div>
            <FilmItem class="list-content" :list="item.list" />
        </div>
        <!-- 首页分类列表 end -->
    </div>
</template>

<script>
import FilmItem from "../components/FilmItem.vue";

export default {
    name: "HomeBox",
    data() {
        return {
            types: []
        };
    },
    components: {
        FilmItem
    },
    methods: {
        loadHomeData() {
            this.$api
                .loadTypes()
                .then(data => {
                    // console.log(data);
                    this.types = data;
                })
                .then(() => {
                    // console.log(this.types)
                    let promiseArr = [];
                    for (let i = 0; i < this.types.length; i++) {
                        let typeId = this.types[i].typeId;
                        let temp = this.$api.loadFilms({
                            typeId: typeId
                        });
                        promiseArr.push(temp);
                    }
                    return Promise.all(promiseArr);
                })
                .then(arr => {
                    // console.log(arr);
                    for (let i = 0; i < arr.length; i++) {
                        this.$set(this.types[i], "list", arr[i]);
                    }
                })
                .catch(this.$error);
        }
    },
    mounted() {
        this.loadHomeData();
    }
};
</script>

<style lang="less" scoped>
// 首页样式
.home-box {
    position: absolute;
    top: 0rem;
    bottom: 0rem;
    left: 0rem;
    right: 0rem;
    overflow-y: auto;
}
.list-content {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    margin-bottom: 0.1rem;
    font-size: 0rem;
    &::after {
        content: "";
        width: 0.1rem;
        display: inline-block;
    }
}
</style>